<template>
  <div class="min-h-screen bg-gradient-to-b from-gray-50 to-white">
    <!-- 页面操作区 -->
    <div class="bg-white shadow-sm border-b border-gray-100">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-end">
          <div class="flex space-x-4">
            <ULink to="/feedback/my-feedback">
              <UButton variant="soft" color="gray" class="flex items-center space-x-1">
                <UIcon name="i-heroicons-user" class="h-5 w-5" />
                <span>我的反馈</span>
              </UButton>
            </ULink>
            <ULink to="/feedback/submit">
              <UButton color="primary" class="flex items-center space-x-1 px-4 py-2 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                <UIcon name="i-heroicons-plus" class="h-5 w-5" />
                <span>提交反馈</span>
              </UButton>
            </ULink>
          </div>
        </div>
      </div>
    </div>

    <!-- 反馈列表 -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 统计信息 -->
      <div v-if="!loading && feedbacks.length > 0" class="mb-6 bg-white rounded-xl p-4 shadow-sm border border-gray-100 flex flex-wrap gap-4 justify-around">
        <div class="flex items-center space-x-3 px-4 py-2">
          <div class="bg-blue-100 p-2 rounded-full">
            <UIcon name="i-heroicons-document-text" class="h-6 w-6 text-blue-600" />
          </div>
          <div>
            <p class="text-sm text-gray-500">总反馈</p>
            <p class="text-xl font-bold text-gray-900">{{ total }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 px-4 py-2">
          <div class="bg-yellow-100 p-2 rounded-full">
            <UIcon name="i-heroicons-clock" class="h-6 w-6 text-yellow-600" />
          </div>
          <div>
            <p class="text-sm text-gray-500">处理中</p>
            <p class="text-xl font-bold text-gray-900">{{ feedbacks.filter(f => f.status === 'pending').length }}</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 px-4 py-2">
          <div class="bg-green-100 p-2 rounded-full">
            <UIcon name="i-heroicons-check-circle" class="h-6 w-6 text-green-600" />
          </div>
          <div>
            <p class="text-sm text-gray-500">已完成</p>
            <p class="text-xl font-bold text-gray-900">{{ feedbacks.filter(f => f.status === 'resolved').length }}</p>
          </div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center py-12">
        <div class="relative">
          <UIcon name="i-heroicons-arrow-path" class="h-10 w-10 animate-spin text-primary-600" />
          <div class="absolute inset-0 h-10 w-10 rounded-full border-t-2 border-primary-200 animate-ping opacity-20"></div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="feedbacks.length === 0" class="text-center py-16 bg-white rounded-xl shadow-sm border border-gray-100 bg-opacity-80 backdrop-blur-sm">
        <div class="transform hover:scale-105 transition-transform duration-300">
          <UIcon name="i-heroicons-chat-bubble-left-right" class="h-20 w-20 mx-auto text-gray-200" />
        </div>
        <h3 class="mt-6 text-xl font-medium text-gray-900">暂无反馈记录</h3>
        <p class="mt-3 text-sm text-gray-500 max-w-md mx-auto">目前还没有用户提交反馈</p>
      </div>

      <!-- 反馈列表 -->
      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div v-for="feedback in feedbacks" :key="feedback.id" 
          class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 border border-gray-100 transform hover:-translate-y-1 h-full flex flex-col">
          <div class="p-4 relative flex-grow">
            <!-- 状态指示条 -->
            <div class="absolute top-0 left-0 w-full h-1" :class="{
              'bg-yellow-400': feedback.status === 'pending',
              'bg-green-400': feedback.status === 'resolved'
            }"></div>
            
            <!-- 反馈头部信息 -->
            <div class="flex flex-wrap items-center justify-between mb-3 gap-2 pt-2">
              <div class="flex flex-wrap items-center gap-2">
                <UBadge 
                  :color="feedback.feed_back_type === 'problem' ? 'red' : 'blue'" 
                  class="flex items-center space-x-1 px-2 py-1 rounded-full shadow-sm text-xs"
                >
                  <UIcon :name="feedback.feed_back_type === 'problem' ? 'i-heroicons-bug-ant' : 'i-heroicons-light-bulb'" class="h-3 w-3" />
                  <span>{{ feedback.feed_back_type === 'problem' ? '问题反馈' : '功能建议' }}</span>
                </UBadge>
                <span class="text-xs text-gray-500 flex items-center bg-gray-50 px-2 py-1 rounded-full">
                  <UIcon name="i-heroicons-clock" class="h-3 w-3 mr-1" />
                  {{ formatDate(feedback.created_at) }}
                </span>
              </div>
              <UBadge
                :color="getStatusColor(feedback.status)"
                variant="subtle"
                class="flex items-center space-x-1 px-2 py-1 rounded-full shadow-sm text-xs"
              >
                <UIcon :name="getStatusIcon(feedback.status)" class="h-3 w-3" />
                <span>{{ getStatusText(feedback.status) }}</span>
              </UBadge>
            </div>

            <!-- 反馈内容 -->
            <div class="bg-gray-50 p-3 rounded-lg border border-gray-100 mb-3 hover:bg-gray-100 transition-colors duration-200 text-sm max-h-24 overflow-y-auto">
              <p class="text-gray-700 leading-relaxed">{{ feedback.content }}</p>
            </div>
            
            <!-- 反馈ID和操作按钮 -->
            <div class="flex justify-between items-center">
              <div class="text-xs text-gray-400 flex items-center">
                <UIcon name="i-heroicons-identification" class="h-3 w-3 mr-1" />
                反馈ID: {{ feedback.id }}
              </div>
              <div class="flex space-x-2">
                <div class="flex items-center space-x-1 text-xs py-1 px-2 bg-gray-50 rounded-md">
                  <UIcon name="i-heroicons-user" class="h-3 w-3 text-gray-500" />
                  <span class="text-gray-600">用户ID: {{ feedback.user_id }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div v-if="hasMore && !loading" class="flex justify-center mt-10">
        <UButton
          color="gray"
          variant="ghost"
          @click="loadMore"
          class="flex items-center space-x-2 px-8 py-2.5 rounded-full hover:bg-gray-100 transition-all duration-300 hover:shadow-md"
        >
          <span>加载更多</span>
          <UIcon name="i-heroicons-arrow-down" class="h-5 w-5" />
        </UButton>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { feedbackApi, type Feedback } from '~/utils/feedback'

const loading = ref(true)
const feedbacks = ref<Feedback[]>([])
const hasMore = ref(true)
const page = ref(1)
const pageSize = 10
const total = ref(0)

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colors = {
    pending: 'yellow',
    resolved: 'green'
  }
  return colors[status] || 'gray'
}

// 获取状态图标
const getStatusIcon = (status: string) => {
  const icons = {
    pending: 'i-heroicons-clock',
    resolved: 'i-heroicons-check-circle'
  }
  return icons[status] || 'i-heroicons-question-mark-circle'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const texts = {
    pending: '处理中',
    resolved: '已解决'
  }
  return texts[status] || '未知状态'
}

// 格式化日期
const formatDate = (timestamp: number) => {
  const date = new Date(timestamp)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

// 加载反馈列表
const fetchFeedbacks = async () => {
  loading.value = true
  try {
    const response = await feedbackApi.getAllFeedbacks(pageSize, page.value)
    
    if (response.code === 0) {
      const { data } = response
      feedbacks.value = [...feedbacks.value, ...data.data]
      total.value = data.total
      hasMore.value = feedbacks.value.length < data.total
    }
  } catch (error) {
    useToast().add({
      title: '操作失败',
      description: error instanceof Error ? error.message : '请稍后重试',
      color: 'red',
      position: 'top'
    })
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  page.value++
  fetchFeedbacks()
}

// 页面加载时获取数据
onMounted(() => {
  fetchFeedbacks()
})
</script>

<style scoped>
/* 移动端响应式样式 */
@media only screen and (max-width: 640px) {
  .responsive-modal {
    width: 95% !important;
    margin: 0 auto;
  }
  
  .p-6 {
    padding: 1rem !important;
  }
  
  .text-xl {
    font-size: 1.1rem !important;
  }
  
  /* 反馈列表页面移动端优化 */
  .flex.space-x-4 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* 统计信息卡片在移动端的优化 */
  .mb-6.bg-white.rounded-xl.p-4 {
    padding: 0.75rem !important;
  }
  
  .flex.items-center.space-x-3.px-4.py-2 {
    padding: 0.5rem !important;
  }
  
  /* 反馈卡片在移动端的优化 */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    gap: 1rem;
  }
}
</style>